<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="selectAll()">
<table border="1px" width="1000px" >
  <tr>
    <th><input type="checkbox"></th>
    <th>账户名</th>
    <th>真实名字</th>
    <th>手机号码</th>
    <th>生日</th>
    <th>角色</th>
    <th>操作</th>
  </tr>
</table>
</body>
<script>
  var xmlHttpRequest;
  function selectAll(){
    xmlHttpRequest = new XMLHttpRequest();
    // 发送的路径
    var url = "AccountServlet?flag=selectAllJson";
    // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
    xmlHttpRequest.open("GET",url,true);
    xmlHttpRequest.onreadystatechange=callback;
    xmlHttpRequest.send(null);
  }
  function callback() {
    // 请求已完成，且响应已就绪  响应正常
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
      // 接收到json格式的字符串  然后转换成对象
      console.log(xmlHttpRequest.responseText);
      var str = xmlHttpRequest.responseText;
      var arr = JSON.parse(str);
     // 循环数组 生产行
      var table = document.getElementsByTagName("table")[0];
      for(var i=0;i<arr.length;i++){
        var tr = table.insertRow();
        tr.insertCell().innerHTML='<input type="checkbox">';
        tr.insertCell().innerHTML=arr[i].accountName;
        tr.insertCell().innerHTML=arr[i].accountRealName;
        tr.insertCell().innerHTML=arr[i].accountPhone;
        tr.insertCell().innerHTML=arr[i].accountBirthday;
        tr.insertCell().innerHTML=arr[i].role.roleName;
        tr.insertCell().innerHTML='<a href="#" title="删除" >删除</a>';
      }
    }
  }

</script>
</html>